<template>
  <div class="data-info">
    <el-tabs
      v-model="activeTab"
      @tab-click="tabClick"
    >
      <el-tab-pane
        label="菜单组列表"
        name="index"
      >
        <menu-group-list
          @chosen="choseMenuGroup"
          @destory="destoryMenuGroup"
          ref="group"
        >
        </menu-group-list>
      </el-tab-pane>
      <el-tab-pane
        :label="menu_tab_name"
        name="menu"
        v-if="gid"
      >
        <menu-list
          :id="gid"
          :group_data="row"
          ref="menu"
        ></menu-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import menuGroupList from "./components/menu_group_list";
import menuList from "./components/menu_list";
export default {
  components: { menuGroupList, menuList },
  data() {
    return {
      activeTab: "index",
      gid: 0,
      row: { title: "" },
      menu_tab_name: "菜单列表"
    };
  },
  created() {
    console.dir(this.$children);
  },
  methods: {
    search() {},
    tabClick() {},
    choseMenuGroup(row) {
      this.gid = 0;
      this.$nextTick(() => {
        this.row = row;
        this.gid = row.id;
        this.activeTab = "menu";
      });
    },
    destoryMenuGroup() {
      this.gid = 0;
      this.activeTab = "index";
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
